<template>
  <div :style="{ textAlign: align, margin: margin }">
    <el-pagination
      :current-page.sync="pagination.current_page"
      :page-size="pagination.per_page"
      :page-sizes="pageSizes"
      :total="pagination.total"
      :layout="layout"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "paginationCom",
  data() {
    return {};
  },
  props: {
    align: {
      type: String,
      default: "right",
    },
    margin: {
      type: String,
      default: "10px 0",
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          current_page: 1,
          per_page: 10,
          total: 0,
        };
      },
    },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100, 200];
      },
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
  },

  components: {},

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    sizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    currentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped lang="scss"></style>
